<style rel="stylesheet/less" lang="less">
    @import "common/style/index";

    .main {
        position: relative;
        margin-top: 62px;
        z-index: 12;
        .left {
        }
        .right {
        }
    }

    .app-login {
        background: rgba(0, 0, 0, 0.75);
        /*background: #39393B;*/
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        /*transform: translateY(-50%);*/
    }

    .ui.toggle.checkbox {
        position: relative;
        z-index: 0;
    }
</style>

<template>
    <div id="app" class="for_dimmer">
        <dimmer></dimmer>

        <div v-if="p404">
            <p404></p404>
        </div>


        <div v-else-if="!islogin" class="app-login">
            <login @afterLogin="afterLogin"></login>
        </div>

        <div v-else>
            <myheader v-if="hasSetCtlinfo&&menus" :_menus="menus" @set_has_leftMenus="set_has_leftMenus"
                      @logout="logout"></myheader>

            <myhome v-if="inhome"></myhome>

            <div class="main" v-else>
                <div class="left">
                    <leftmenu v-if="hasSetCtlinfo&&has_leftMenus" :path="currentPath"></leftmenu>
                </div>
                <div class="right" v-if="hasSetCtlinfo">
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </div>
            </div>
            <pop :option='popOption' @popHidden='popHidden' :popShow="popShow"></pop>
            <mypop></mypop>
            <mymodal @modalHidden='modalHidden' :modalShow="modalShow"></mymodal>
            <modal_search v-if="hasSetCtlinfo" :isList="isList" @modalComHidden='modalSearchShow = false'
                          @doSearch='doSearch'
                          :modalShow="modalSearchShow"></modal_search>
            <modal_detail v-if="hasSetCtlinfo" @modalComHidden='modalDetailShow = false' @doSearch='doSearch'
                          :modalShow="modalDetailShow"></modal_detail>
            <modal_edit v-if="hasSetCtlinfo" @modalComHidden='modalEditShow = false'
                        :modalShow="modalEditShow"></modal_edit>
        </div>


    </div>
</template>

<script>
    import myheader from 'components/header/header'
    import leftmenu from 'components/common/leftmenu'
    import pop from 'components/pop/pop'
    import mypop from 'components/pop/mypop'
    import mymodal from 'components/modal/modal'
    import modal_edit from 'components/modal/modal_edit'
    import login from 'components/login/login'
    import modal_search from 'components/modal/modal_search'
    import modal_detail from 'components/modal/modal_detail'
    import p404 from 'components/page/404'
    import myhome from 'components/page/home'
    import dimmer from 'components/dimmer/dimmer_com';

    import tool from './util/tool';
    import util from '_util/index';
    //  import _ from 'lodash';


    export default {
        name: 'app',
        components: {
            myheader,
            login,
            mymodal,
            modal_edit,
            modal_detail,
            mypop,
            modal_search,
            pop,
            leftmenu,
            p404,
            myhome,
            dimmer
        },
        data() {
            return {
                menus: null,
                leftMenu: {},
                popOption: {
                    header: '提示',
                    msgTypeIcon: 'warning',
                    msgType: 'warning',
                    content: '确认此操作吗？',
                    positive: '确定',
                    negative: '取消',
                },
                showRight: false,
                popShow: false,
                has_leftMenus: false,
                modalShow: false,
                modalSearchShow: false,
                modalDetailShow: false,
                modalEditShow: false,
                showVariable: false,
                hasSetCtlinfo: false,
                apiState1: false,
                apiState2: false,
                apiState3: false,
                apiState4: false,
                islogin: false,

            }

        },
        computed: {
            currentPath() {
                let path = this.$route.path
                return path
            },
            allDone(){
                return this.apiState1 && this.apiState2 && this.apiState3 && this.apiState4;
//        return this.apiState1 && this.apiState2 && this.apiState3 ;
            },
            isList(){
                return this.$store.state.global.op == '';
            },
            p404(){
                return this.$route.path == '/404'
            },
            inhome(){
                return this.$route.path == '/page/home'
            }
        },
        created() {

            if (this.p404) {
                return
            }
            if (this.$cookie.get('txy_name') && this.$cookie.get('txy_token')) {
                this.islogin = true;
                this.upSysInfo();
            } else
                this.islogin = false

            /**
             *  eventVue：
             *     vue的全局对象
             *     此处作用与监听子组件的事件处理
             * */
            let eventVue = util.store.get(this, 'eventVue');
            eventVue.$on('setPop', this.setPop)
            eventVue.$on('setModal', this.setModal)
            eventVue.$on('hidePop', this.popHidden)
            eventVue.$on('showSearchModal', this.showSearchModal)
            eventVue.$on('hideSearchModal', this.hideSearchModal)
            eventVue.$on('hideDetailModal', this.hideDetailModal)
            eventVue.$on('showDetailModal', this.showDetailModal)
            eventVue.$on('showModalEdit', this.showModalEdit)
            eventVue.$on('hideModalEdit', this.hideModalEdit)
            eventVue.$on('upSysInfo', this.upSysInfo)
            eventVue.$on('logout', this.logout)
            eventVue.$on('showDimmer', this.showDimmer)
        },
        watch: {
            allDone(val){
                if (val) {
                    util.setCtlinfo(this);
                    this.hasSetCtlinfo = true;
                }
            }
        },
        methods: {
            showDimmer(){
                $('.for_dimmer').dimmer('show');
            },
            set_has_leftMenus(){
                this.has_leftMenus = true;
//        util.eventEmit(this,'menuUpdate');
            },
            upSysInfo(){
                this.getMenus();
                this.getAllMenu();
                this.getModelAll();
                this.set_user_auth();
            },
            logout(){
                this.$cookie.delete('txy_name');
                this.$cookie.delete('txy_token');
                this.$cookie.delete('txy_tz_admin_id');
                util.store.push(this, 'setTopMid', 'top_mid', false, 0, 'global');
                this.$set(this.$data, 'islogin', false);

                $('.ui.dimmer.modals').remove();
            },
            afterLogin(){
                this.islogin = true
                this.apiState4 = true;
                this.upSysInfo();
            },
            showSearchModal(flag) {
                switch (flag) {
                    default:
                        this.modalSearchShow = true
                }
            },
            hideSearchModal(flag) {
                switch (flag) {
                    default:
                        this.modalSearchShow = false
                }
            },
            showDetailModal() {
                this.$nextTick(() => {
                    this.modalDetailShow = true
                })
            },
            hideDetailModal() {
                this.modalDetailShow = false
            },
            showModalEdit() {
                this.$nextTick(() => {
                    this.modalEditShow = true
                })
            },
            hideModalEdit() {
                this.modalEditShow = false
            },
            doSearch(searchVo) {
                let eventVue = util.store.get(this, 'eventVue');
                eventVue.$emit('doSearch', searchVo)
            },
            popHidden() {
                this.popShow = false;
                this.modalSearchShow = false
            },
            modalHidden() {
                this.modalShow = false;
            },
            setPop(option) {
                if (option)
                    this.popOption = option;
                this.popShow = true;
            },
            setModal() {
                this.modalShow = true;
            },
            getMenus() {
                this.apiState1 = false;
                let url = tool.getApi(this, 'Menu');

                let param = {
                    pid: 0,
                    notFiter: 1,
                    notParse: 1
                };
                util.http.SR(this, url, param, null, (rs) => {
                    this.menus = rs
                    util.store.commit(this, 'setMenus', rs);
                    this.apiState1 = true;
                });
            },
            getAllMenu() {
                this.apiState2 = false;
                let url = tool.getApi(this, 'Menu');
                let param = {
                    notParse: 1,
                    notFiter: 1
                }
                util.getDataCom(this, url, param, (rs) => {
                    util.store.commit(this, 'setMenuAll', rs)
                    this.apiState2 = true;
                });


            },
            set_user_auth() {
                let auth = util.store.get(this, 'auth', 'user');
                if (!auth)
                    util.modelFn('Auth', 'set_user_auth', this);
            },
            getModelAll() {
                this.apiState3 = false;
                let url = tool.getApi(this, 'Model');
                let param = {
                    notParse: 1
                }
                util.getDataCom(this, url, param, (rs) => {
                    util.store.commit(this, 'setModelAll', rs)
                    this.apiState3 = true;
                });


            },
        }
    }
</script>
